<template>
  <view class="place-wrap" v-if="Object.keys(info).length > 0">
    <u-popup
      :show="show"
      :customStyle="{ width: '80%' }"
      mode="center"
      bgColor="transparent"
      @close="close"
      @open="open"
    >
      <view class="place-wrap">
        <view class="place-title m-flex m-row-center">
          订单确认
          <u-icon @click="close" name="close" color="#6d6d6d"></u-icon>
        </view>
        <view class="place-label">结算时间/赔率</view>
        <view class="m-flex m-son-shrink m-flex-wrap place-nav p2">
          <view
            class="place-nav-item"
            @click="timeChoose(item)"
            v-for="(item, index) in order_price"
            :key="index"
            :class="item == timeActive ? 'active' : ''"
          >
            {{ item.time }}秒 |  {{ item.shouyi }}%
			<!-- {{ odds[index] ? `|${odds[index]}` : "" }} -->
          </view>
        </view>
        <view class="place-label">投资资金</view>
        <view class="m-flex m-son-shrink m-flex-wrap place-nav p2">
          <view
            class="place-nav-item"
            @click="priceActive = item"
            v-for="(item, index) in priceList"
            :key="index"
            :class="item == priceActive ? 'active' : ''"
          >
            ￥{{ item }}
          </view>
        </view>
        <view class="price-input">
          <u--input
            @focus="priceActive = null"
            v-model="other_money"
            placeholder="其他金额"
            fontSize="12px"
            color="#fff"
            border="none"
          ></u--input>
        </view>
        <view class="place-label price-hint m-flex p2">
          <view class="m-flex-3">余额：{{ info.user.money }}</view>
          <view class="m-flex-3">手续费：0%</view>
        </view>
        <u-button
          @click="subPlace"
          color="#edd33a"
          :customStyle="{ color: '#000' }"
          text="确认下单"
        ></u-button>
        <view class="m-table place-table text-center">
          <view class="m-tr p2">
            <view class="m-td"> 名称 </view>
            <view class="m-td"> 方向 </view>
            <view class="m-td"> 现价 </view>
            <view class="m-td"> 金额 </view>
          </view>
          <view class="m-tr p2">
						<view class="m-td">
							{{info.info.title}}
						</view>
						<view class="m-td" :class="type?'green':'red'">
							{{type?'买跌':'买涨'}}
						</view>
						<view class="m-td" :class="type?'green':'red'">
							{{new_price}}
						</view>
						<view class="m-td yellow">
							￥{{money||0}}
						</view>
					</view>
        </view>
        <!-- <view class="income p2 text-center">预期收益：￥{{income}} 保底金额：￥{{lowest}}</view> -->
      </view>
    </u-popup>
    <order-time :type="2" :show="warning" @close="warning = false"></order-time>
  </view>
</template>

<script>
export default {
  name: "place-order",
  data() {
    return {
      order_price: [], //结算时间列表
      timeActive: null, //结算时间选中
      priceList: [], //投资资金列表
      priceActive: null, //结算资金选中
      other_money: "", //金额
      odds: ["", "", ""],
      warning: false, //余额不足警告
    };
  },
  computed: {
    money() {
      if (this.priceActive) {
        return this.priceActive;
      } else {
        if (!this.other_money) return 0;
        return this.other_money;
      }
    },
    income() {
      if (!this.timeActive || !this.money) return 0;
      let profit = calculation(this.money * (this.timeActive.shouyi / 100));
      return calculation(profit * 1 + this.money * 1);

      function calculation(num) {
        let str = (num * 1).toFixed(3);
        return str.substring(0, str.length - 2);
      }
    },
    lowest() {
      if (!this.timeActive || !this.money) return 0;
      let profit = calculation(this.money * (this.timeActive.kuisun / 100));
      return calculation(this.money * 1 - profit * 1);

      function calculation(num) {
        let str = (num * 1).toFixed(3);
        return str.substring(0, str.length - 2);
      }
    },
    infodata() {
      if (this.type == 3) {
        this.order_price = ["60"];
      }
    },
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    info: Object,
    type: Number, //下单类型
    new_price: [Number, String], //现价
  },
  watch: {
    show(val) {
      if ((val = true)) {
        this.order_price = this.info.info.order_price;
        this.timeActive = this.order_price[0];
        this.priceList = this.timeActive.prices;
        this.priceActive = this.priceList[0];
      }
    },
  },
  methods: {
    // 时间选择
    timeChoose(item) {
      this.timeActive = item;
      this.priceList = item.prices;
      this.priceActive = null;
    },
    subPlace() {
      if (this.money > this.info.user.money) return (this.warning = true);
      const min_price = this.priceList[0],
        max_price = this.priceList[this.priceList.length - 1];
		console.log(this.money,'this.money')
		console.log(min_price,'min_price')
			console.log(max_price,'max_price')
			// Number(this.money) < min_price || Number(this.money) > max_price
      if ( Number(this.money) < min_price || Number(this.money) > max_price) {
        return uni.showToast({
          title: `不能小于${min_price},不能大于${max_price}`,
          icon: "none",
        });
      }
	  // return
      let para = {
        order_type: this.type,
        order_sen: this.timeActive.time,
        order_price: this.money,
        order_shouyi: this.timeActive.shouyi,
        order_kuishun: this.timeActive.kuisun,
      };
      this.$emit("subTap", para);
    },
    open() {
      this.$emit("open");
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss">
.place-wrap {
  background-color: #000c;

  .place-title {
    position: relative;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #fff;

    .u-icon {
      position: absolute;
      right: 0;
    }
  }

  .place-label {
    color: #b2b0c7;
    line-height: 2;
  }

  .place-nav {
    .place-nav-item {
      padding: 0.5em;
      border-radius: 0.5em;
      border: 1px solid #fff;
      margin-right: 1em;
      margin-bottom: 0.5em;

      &.active {
        background-color: #edd33a;
        border-color: #edd33a;
        color: #000;
      }
    }
  }

  .price-input {
    padding-bottom: 0.2em;
    border-bottom: 1px solid #fff;
  }

  .price-hint {
    border-bottom: 1px solid #333235;
  }

  .place-table {
    .m-td {
      padding: 0.5em 0;
    }

    .green {
      color: rgb(38, 168, 72);
    }

    .red {
      color: rgb(255, 1, 5);
    }

    .yellow {
      color: #edd33a;
    }
  }

  .income {
    line-height: 2;
    color: #edd33a;
  }
}
</style>
